import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Button, Space, Modal, Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { PrinterOutlined } from '@ant-design/icons';
import QuotationSearch from './QuotationSearch';
import styles from './styles.less'
import request from '@/utils/request';
import TempleteQuote from '../PrintTemplete/TempleteQuote';
import PrintModal from '@/components/PrintModal';

const { Text } = Typography;

interface User {
  key: number;
  name: string;
  totalCost: number;

}
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      defaultParams: {},
      params: {},
      selectedKeys: [],
      pageNumber: 1,
      pageSize: 10,
      dataSource: [],
      visible: false,
      totalTax: 0,
      totalCost: 0,
      totalTaxCost: 0
    };
  }
  printArea: any = React.createRef();
  // componentDidMount，（装载完成），在render之后调用
  componentDidMount() {
    this.query();
  }
  query() {
    //接口，获取报价单list
    const { params } = this.state;
    if (params.orderNum) {
      this.setState({ loading: true });
      request('/api/services/app/OrderHed/GetOrderQuote', {
        method: 'GET',
        params: { num: params.orderNum },
      }).then((response) => {
        if (response) {
          if (response.success) {
            this.setState({
              dataSource: response.result
            });
          }
          this.setState({ loading: false });
        }
      });
    }
  }
  handlePageChange = (pageNumber: any, pageSize: any) => {
    this.setState({
      pageNumber,
      pageSize,
    });
  };

  handleSearch = (values: any) => {
    this.setState(
      {
        params: { ...values },
        pageNumber: 1,
      },
      this.query,
    );
  };
  /**
   * 控制更新模态框显示
   * @param {boolean} visible 是否显示
   * @param {object} formVals 模态框默认值
   * @param {boolean} editStatus 是否编辑模式
   */
  switchVisible = (visible = false, formVals = {}, editStatus = false) => {
    this.setState({
      visible,
      formVals,
      editStatus,
    });
  };
  handlePrint = () => {
    this.setState({ visible2: true })
  };
  render() {
    const columns: ColumnsType<User> = [
      {
        title: '物料编码',
        dataIndex: 'partNum',
        width: 100,
      },
      {
        title: '描述',
        dataIndex: 'lineDesc',
      },
      {
        title: '版本',
        width: 50,
        dataIndex: 'revisionNum',
      },
      {
        title: '数量',
        dataIndex: 'quantity',
      },
      {
        title: '单位',
        width: 50,
        dataIndex: 'ium',
      },
      {
        title: '物料单价',
        dataIndex: 'unitCost',
      },

      {
        title: '工费',
        dataIndex: 'lbrCost',
      },
      {
        title: '杂项费用',
        dataIndex: 'miscCost',
      },
      {
        title: '总价',
        fixed: "right",
        width: 150,
        dataIndex: 'totalCost',
      },
    ];
    const { defaultParams = {}, dataSource, loading } = this.state;
    return (
      <PageHeaderWrapper title={false}>
        <Card  >
          <QuotationSearch defaultParams={{ ...defaultParams }} onSearch={this.handleSearch}>
            <Button icon={<PrinterOutlined />} onClick={this.handlePrint}>打印</Button>
          </QuotationSearch>
          <Table
            className={styles.tableScroll}
            rowKey="id"
            size="small"
            columns={columns}
            dataSource={dataSource.items}
            loading={loading}
            scroll={{ x: 'max-content' }}
            pagination={{
              showSizeChanger: true,
              showQuickJumper: true,
              onChange: this.handlePageChange,
              onShowSizeChange: this.handlePageChange,
            }}
            summary={list => {
              let total = 0;
              list.forEach(({ totalCost }) => {
                total += parseFloat(totalCost.toString());
              });

              return (
                <>
                  <Table.Summary.Row>

                    <Table.Summary.Cell index={0}></Table.Summary.Cell>
                    <Table.Summary.Cell index={1}>
                      税额：<Text type="danger" strong>￥{dataSource.totalTax}</Text>，
                      含税总价：<Text type="danger" strong>￥{dataSource.totalTaxCost}</Text></Table.Summary.Cell>
                    <Table.Summary.Cell index={2}></Table.Summary.Cell>
                    <Table.Summary.Cell index={3}></Table.Summary.Cell>
                    <Table.Summary.Cell index={4}></Table.Summary.Cell>
                    <Table.Summary.Cell index={5}></Table.Summary.Cell>
                    <Table.Summary.Cell index={6}></Table.Summary.Cell>
                    <Table.Summary.Cell index={7}>未税总价：</Table.Summary.Cell>
                    <Table.Summary.Cell index={8}>
                      <Text type="danger" strong>￥{total}</Text>
                    </Table.Summary.Cell>
                  </Table.Summary.Row>

                </>
              );
            }}
          />
        </Card>
        <div ref={(ref) => (this.printArea = ref)} hidden>
          <TempleteQuote data={dataSource} ref={(ref) => (this.printArea = ref)} hidden />
        </div>
        <Modal
          width={1024}
          title="采购单打印"
          visible={this.state.visible2}
          destroyOnClose={true}
          onCancel={() => this.setState({ visible2: false })}
          footer={false}
        >
          <PrintModal>
            <TempleteQuote data={dataSource} ref={(ref) => (this.printArea = ref)} hidden />
          </PrintModal>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}
export default ViewPage;
